<template>
  <div class="tutor-management">
    <!-- 操作按钮 -->
    <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">新增助教</el-button>

    <!-- 助教信息表格 -->
    <el-table :data="paginatedTutors" style="width: 100%" stripe>
      <el-table-column label="ID" prop="id" width="100" />
      <el-table-column label="名字" prop="name" width="180" />
      <el-table-column label="性别" prop="gender" width="100" />
      <el-table-column label="照片" prop="photo" width="120">
        <template #default="scope">
          <img :src="scope.row.photo" alt="照片" style="width: 60px; height: 60px; border-radius: 50%;" />
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" width="300" />
      <el-table-column label="价格" prop="tutor_price" width="120" />
      <el-table-column label="支持门店" prop="stores_name" width="180" />
      <el-table-column label="状态" prop="state" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'" disable-transitions>
            {{ scope.row.state === 0 ? '可预约' : '不可预约' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="可预约时间段" prop="appointments" width="300" />

      <!-- 操作按钮 -->
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteTutor(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控制和每页条数选择 -->
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="tutors.length"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
          class="pagination"
      />
      <el-select v-model="pageSize" class="page-size-select" @change="handlePageSizeChange" placeholder="每页显示条数">
        <el-option label="3条" :value="3"></el-option>
        <el-option label="5条" :value="5"></el-option>
        <el-option label="10条" :value="10"></el-option>
        <el-option label="20条" :value="20"></el-option>
      </el-select>
    </div>

    <!-- 新增/编辑助教弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="currentTutor" :rules="rules" ref="tutorForm" label-width="100px">
        <el-form-item label="名字" prop="name">
          <el-input v-model="currentTutor.name" placeholder="请输入名字" />
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-select v-model="currentTutor.gender" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>

        <el-form-item label="照片" prop="photo">
          <el-input v-model="currentTutor.photo" placeholder="请输入照片链接（图片URL）" />
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input v-model="currentTutor.description" placeholder="请输入描述" />
        </el-form-item>

        <el-form-item label="价格" prop="tutor_price">
          <el-input v-model="currentTutor.tutor_price" placeholder="请输入价格" />
        </el-form-item>

        <el-form-item label="支持门店" prop="stores_name">
          <el-input v-model="currentTutor.stores_name" placeholder="请输入支持门店" />
        </el-form-item>

        <el-form-item label="状态" prop="state">
          <el-select v-model="currentTutor.state" placeholder="选择状态">
            <el-option label="可预约" value="0" />
            <el-option label="不可预约" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="可预约时间段" prop="appointments">
          <el-input v-model="currentTutor.appointments" placeholder="请输入可预约时间段" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTutor">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tutors: [
        { id: 1, name: '张三', gender: '男', photo: 'https://www.example.com/photo1.jpg', description: '专业台球助教', tutor_price: 100, stores_name: '台球厅A', state: 0, appointments: '9:00-12:00' },
        { id: 2, name: '李四', gender: '女', photo: 'https://www.example.com/photo2.jpg', description: '资深台球助教', tutor_price: 150, stores_name: '台球厅B', state: 1, appointments: '14:00-18:00' }
      ],
      currentTutor: {
        id: null,
        name: '',
        gender: '',
        photo: '',
        description: '',
        tutor_price: '',
        stores_name: '',
        state: 0,
        appointments: ''
      },
      currentPage: 1, // 当前页
      pageSize: 3,    // 每页显示的数据条数
      dialogVisible: false,
      dialogTitle: '新增助教',
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        photo: [{ required: true, message: '请输入照片链接', trigger: 'blur' }],
        description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
        tutor_price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        stores_name: [{ required: true, message: '请输入支持门店', trigger: 'blur' }],
        state: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        appointments: [{ required: true, message: '请输入可预约时间段', trigger: 'blur' }]
      }
    };
  },
  computed: {
    paginatedTutors() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tutors.slice(start, end);
    }
  },
  methods: {
    openAddDialog() {
      this.currentTutor = { id: null, name: '', gender: '', photo: '', description: '', tutor_price: '', stores_name: '', state: 0, appointments: '' };
      this.dialogTitle = '新增助教';
      this.dialogVisible = true;
    },
    openEditDialog(tutor) {
      this.currentTutor = { ...tutor };
      this.dialogTitle = '编辑助教';
      this.dialogVisible = true;
    },
    saveTutor() {
      this.$refs.tutorForm.validate((valid) => {
        if (valid) {
          if (this.currentTutor.id) {
            const index = this.tutors.findIndex(tutor => tutor.id === this.currentTutor.id);
            this.$set(this.tutors, index, this.currentTutor);
          } else {
            this.currentTutor.id = this.tutors.length + 1;
            this.tutors.push(this.currentTutor);
          }
          this.dialogVisible = false;
          this.$message.success(`${this.dialogTitle === '新增助教' ? '新增' : '编辑'}成功`);
        }
      });
    },
    deleteTutor(tutor) {
      this.$confirm('确认删除该助教吗?', '删除助教', {
        type: 'warning',
      }).then(() => {
        this.tutors = this.tutors.filter(item => item.id !== tutor.id);
        this.$message.success('删除成功');
      }).catch(() => {});
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handlePageSizeChange(size) {
      this.pageSize = size;
    }
  }
};
</script>

<style scoped>
.tutor-management {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}

.el-button {
  margin-right: 10px;
}

.el-table .cell img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.page-size-select {
  margin-left: 10px;
  width: 150px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
